<template>
    <div class="answer scroll">
        <div class="contentbox">
            <div class="top">
                <div class="left">
                    <div class="headpic">
                        <div class="pic">
                            <img :src="userinfo.userAvatar ? userinfo.userAvatar : headError" :onerror="headError" v-if="userinfo.userAvatar">
                        </div>
                    </div>
                    <div class="vs"></div>
                    <div class="truename">{{userinfo.sstUserTruename}}</div>
                    <div class="score">{{userscore}}</div>
                    <div class="timer">
                        <div class="process">
                            <div class="pic" :style="'width:'+curwidth"></div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="item clearfix" v-for="(item,index) in robotList" :key="index">
                        <div class="headpic">
                            <div class="pic" >
                                <img :src="item.avatar ? item.avatar : headError" :onerror="headError" v-if="item.avatar">
                            </div>
                        </div>
                        <div class="truename">{{item.name}}</div>
                        <div class="score">{{item.score}}</div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="answerbox">
                    <div class="topbar"></div>
<!--单选题问题-->
                    <!--图文-->
                    <div class="question" v-if="qtype==0">
                        <div class="qtext" v-if="atype==1"></div>
                        {{detailQuestion.question}}
                        <div class="picborder">
                            <img :src="testimg" @load="ResizePhotoImg($event)">
                        </div>
                    </div>
                    <!--图-->
                    <div class="question" v-if="qtype==1">
                        <div class="picborder picborder2">
                            <img :src="testimg" @load="ResizePhotoImg($event)">
                        </div>
                    </div>
                    <!--音频+文字-->
                    <div class="question" v-if="qtype==2">
                        <div class="qtext" v-if="atype==1"></div>
                        {{detailQuestion.question}}
                        <div class="audio">
                            <div class="audioplay" @click="playAudio"></div>
                        </div>
                    </div>
                    <!--文字-->
                    <div class="question" v-if="qtype==3">
                        <div class="qtext" v-if="atype==1"></div>
                        {{detailQuestion.question}}
                        <div class="bot1"></div>
                    </div>
                    <!--音频-->
                    <div class="question" v-if="qtype==4">
                        <div class="audio">
                            <div class="audioplay shadow" @click="playAudio"></div>
                        </div>
                        <div class="bot2"></div>
                    </div>
<!--选项-->
                    <div class="optionbox" :class="atype==0?'botmargin':''">
                        <!--单选题-->
                        <div class="option" v-if="atype==0" v-for="(item,index) in optionList" :key="index" @click="selectOne(item)">
                            <div class="txt">{{item.txt}}</div>
                        </div>
                        <!--多选题-->
                        <div class="option" v-if="atype==1" v-for="(item,index) in optionList" :key="index" @click="selectMore(item)" :class="[{'isright':item.right==1},{'wrong':item.right==2},{'on':item.sel==1&&item.right==0}]">
                            <div class="txt">{{item.txt}}</div>
                        </div>
                        <!--填空题-->
                        <div class="option2" v-if="atype==2" >
                            <input class="ans-input" placeholder="请输入你的答案" v-model="inputvalue">
                        </div>
                    </div>

                    <div class="submit" v-if="atype!=0">
                        <div class="subbtn" v-if="subFlag==0"></div>
                        <div class="subbtn subbtn2" v-if="subFlag==1" @click="submit"></div>
                        <div class="subbtn subbtn3" v-if="subFlag==2" ></div>
                    </div>
                </div>
            </div>
        </div>

        <transition name="fade">  
            <div class="mask" v-show="finish!=2" :class="finish==0?'resultCanvas':'failCanvas'">
                <canvas id="can" v-show="finish==1||finish==0"></canvas>
                <div class="answerList" v-if="finish==0" :class="[{'success':resultCode==0},{'zjzl':resultCode==1},{'fail':resultCode==2}]">
                    <div class="rank">
                        <div class="item" v-for="(item,index) in ranklist" :key="index">
                            <div class="icon" :class="'icon'+(index+1)"></div>
                            <div class="avatar">
                                <div class="pic">
                                    <img :src="item.avatar ? item.avatar : headError" :onerror="headError" v-if="item.avatar">
                                </div>
                            </div>
                            <div class="truename" :class="!item.name?'noname':''">{{item.name?item.name:'空'}}</div>
                            <div class="shadowcoin"></div>
                            <div class="score">{{item.score?item.score:0}}</div>
                        </div>
                    </div>
                    <div class="onemore" @click="onemore"></div>
                    <div class="back" @click="back"></div>
                </div>
                <div class="fenyin" v-if="finish==1">
                    <div class="word">还剩{{leftTime}}秒,解除封印</div>
                </div>
                <div class="loading-word" v-if="finish==4">正在提交结果，请稍等...</div>
            </div>
        </transition>
    </div>
</template>

<script>
import {ResizePhotoImg} from "@/assets/js/ResizePhotoImg.js";
import * as api from '@/api/index';
import UPlayAnimate from '../game/imgCanvas'
export default {
    data(){
        return{
            userinfo:JSON.parse(localStorage.getItem("userInfo")),
            headError: this.$store.state.headError,
            robotList:[],
            initTime:120, //游戏剩余时间
            gameTime:120, //游戏共120s
            curwidth:'100%',
            setInitTime:null,
            ResizePhotoImg:ResizePhotoImg,
            qtype:3, //0-图文 1-图 2-音+文字 3-文字 4-音频
            atype:0, //0-单选题 1-多选题 2-填空题
            testimg:"http://pics.91118.com/picquestion//英语/擂台/记单词/食品、饮料/mutton_094311079.jpg",
            optionList:[],//单选题选项
            inputvalue:'',
            ranklist:[],
            finish:2, //0游戏结束呈现结果 1回答错误罚时 2答题状态 4打开等待弹层
            leftTime:3, //回答错误罚时3s
            setLeftTime:null,
            roomid:this.$route.query.roomid,
            allNum:50, //题目数量
            questionList:[], //题目列表
            rightid:'', //以，分隔的回答正确的题目id
            rightidList:[],//正确的题目的id列表
            wrongid:'', //以，分隔的回答错误的题目id
            wrongidList:[],//错误题目的id列表
            userscore:0, //用户得分
            randomInitTime:null, //机器人随机增加分数的计时器
            qindex:0, //当前正在做的题目下标
            useroption:'', //用户选择的选项按照_splitFlag_连接成字符串
            detailQuestion:{}, //当前回答的问题信息
            subFlag:0, //提交按钮状态 0 1 2
            questionNum:0, //获取的题目数量
            resultCode:0, //0成功 1再接再厉 2失败
            submitFlag:0, //0本次游戏成绩未提交 1已经提交
            handleNew:null,
        }
    },
    watch:{
        qindex(val){
            this.subFlag=0
            if(val==this.questionNum){
                this.finish=4
                this.isfinish()
                return
            }
            this.useroption=''
            this.optionList=[]
            this.getQuestion()
        }
    },
    mounted(){
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        this.getInit()
        this.reduceTime()
        this.getRobotList()
        this.robotScore()
        this.getQuestionIds()
        //this.reduceLeftTime();
    },
    methods:{
        goBack(){
            window.removeEventListener('popstate', this.goBack, false);
            this.$router.push({path:'/pkgame'})
        },
        getInit(){
            var can = document.getElementById('can');
            can.width=400
            can.height=526
            var sources = [];
            
            var dataSetting = {
                sources: sources,
                stepAct: false,
            }
            this.handleNew = new UPlayAnimate(can,dataSetting)

        },
        //120s倒计时，时间到结束游戏
        reduceTime(){
            this.setInitTime=setInterval(()=>{
                this.initTime--
                this.curwidth=this.initTime/this.gameTime*100+'%'
                if(this.initTime==0){
                    clearInterval(this.setInitTime)
                    this.setInitTime=null
                    if(this.submitFlag==0){
                        this.finish=4
                    }
                    this.isfinish()
                    return
                }
            },1000)
        },
        playAudio(){
            console.log("audio")
        },
        //回答错误罚时的计时
        reduceLeftTime(){
            this.finish=1
            var sources = [];
            for(var i=0;i<9;i++){
                sources[i] = "./static/img/pkEnd/fenyin/" + (i+1) + ".png";//根据项目修改
            }
            var dataSetting = {
                sources: sources,
                stepAct: true,
            }
            this.handleNew.reset(dataSetting,()=>{})
            this.setLeftTime=setInterval(()=>{
                this.leftTime--
                if(this.leftTime==0){
                    this.handleNew.switch((rafId)=>{
                        this.finish=2
                        if(this.subFlag==2&&this.atype==1){
                            this.qindex++
                        }
                        if(this.atype==0){
                            this.qindex++
                        }
                    })
                    clearInterval(this.setLeftTime)
                    this.setLeftTime=null
                    return
                }
            },1000)
            this.leftTime=3
        },
        //获取机器人信息
        getRobotList(){
            this.robotList=JSON.parse(localStorage.getItem('robotList'))
            this.robotList.splice(0,1)
            this.robotList.forEach(item=>{
                this.$set(item,'score',0)
                this.$set(item,'isSelf',0)
            })
        },
        //sort排序的compare函数
        sortByKey(array,key){
            return array.sort((a,b)=>{
                var x=a[key]
                var y=b[key]
                return((x<y)?1:-1);
            })
        },
        //提交信息后获取结果列表
        getRankList(){
            clearInterval(this.randomInitTime)
            this.randomInitTime=null
            this.ranklist=this.ranklist.concat(this.robotList)
            this.ranklist.push({name:this.userinfo.sstUserTruename,avatar:this.userinfo.userAvatar,score:this.userscore,isSelf:1})
            this.sortByKey(this.ranklist,'score')
            var num = this.ranklist.length
            if(this.ranklist[0].isSelf) this.resultCode = 0
			else if(this.ranklist[num-1].isSelf) this.resultCode = 2
            else this.resultCode = 1

            var can = document.getElementById('can');
            can.width=750
            can.height=1334
            var sources = [];
            var type=this.resultCode==0?'success':this.resultCode==2?'fail':'zjzl'
            for(var i=0;i<14;i++){
                sources[i] = "./static/img/pkEnd/"+type+"/" + (i+1) + ".png";//根据项目修改
            }
            var dataSetting = {
                sources: sources,
                stepAct: true,
            }
            this.handleNew.reset(dataSetting,()=>{})
            this.finish=0
        },
        //随机生成机器人的分数
        robotScore(){
            var time=10
            this.randomInitTime=setInterval(()=>{
                time--
                this.robotList.forEach(item=>{
                    var random=Math.random()
                    var isAdd=Math.floor(random+0.5) //=0 1
                    item.score=isAdd==1?item.score+10:item.score
                })
                if(time == 0){
					clearInterval(this.randomInitTime)
					this.randomInitTime = null;
					return
				}
            },10000)
        },
        //获取题目列表
        async getQuestionIds(){
            var data={
                roomId:this.roomid,
                num:this.allNum
            }
            var res=await api.getQuestionIds(data)
            if(res.resultCode==1){
                this.questionList=res.value?res.value:[]
                console.log(this.questionList)
                this.questionNum=this.questionList.length
                this.getQuestion()
            }
        },
        //获取当前正在做的题目信息
        getQuestion(){
            if(this.questionList.length==0){
                this.$LayerTips({
					content: "当前房间没有题目",
					time: 1500
                });
                this.$router.push({path:'/pkgame'})
                return
            }
            this.detailQuestion=this.questionList[this.qindex]
            this.atype=this.detailQuestion.questionType
            if(this.atype!=2){ //题目不为填空题
                var tempList=this.detailQuestion.answer.split('_splitFlag_')
                for(var i=0;i<tempList.length;i++){
                    this.optionList.push({txt:tempList[i],sel:0,right:0,answer:0})
                }
            }
        },
        //单选题点击事件
        selectOne(item){
            this.useroption=item.txt
            if(this.detailQuestion.rightAnswer==this.useroption){
                this.userscore+=10
                this.rightidList.push(this.detailQuestion.questionId)
                this.qindex++
            }
            else {
                this.reduceLeftTime()
                this.wrongidList.push(this.detailQuestion.questionId)
            }
        },
        //多选题点击事件
        selectMore(item){
            if(item.right==0){
                this.subFlag=1
                item.sel=!item.sel
            }
        },
        //多选题提交
        submit(){
            var tempAnswer=this.detailQuestion.rightAnswer.split('_splitFlag_');
            var j=0;
            var multiOptionIsRight=1;
            for(var i=0;i<this.optionList.length;i++){
                if(this.optionList[i].sel==1){
                    for(j=0;j<tempAnswer.length;j++){
                        if(this.optionList[i].txt==tempAnswer[j]) {this.optionList[i].right=1;break}
                    }
                    if(j==tempAnswer.length){
                        this.optionList[i].right=2;
                        multiOptionIsRight=0;
                    }
                }
                else{
                    for(var j=0;j<tempAnswer.length;j++){
                        if(this.optionList[i].txt==tempAnswer[j]) {this.optionList[i].right=1;multiOptionIsRight=0;break}
                    }
                }
            }
            this.subFlag=2
            if(multiOptionIsRight==1) {
                this.userscore+=10
                this.rightidList.push(this.detailQuestion.questionId)
                this.qindex++
            }
            else {
                this.reduceLeftTime()
                this.wrongidList.push(this.detailQuestion.questionId)
            }
        },
        //游戏结束提交成绩
        async isfinish(){
            if(this.submitFlag==1){
                return
            }
            this.rightid=this.rightidList.join()
            this.wrongid=this.wrongidList.join()
            var data={
                allScore:this.userscore,
                classId:this.userinfo.classList[0].classId,
                futureId:this.userinfo.futureId,
                questionScore:10,
                rightQuestion:this.rightid,
                roomId:this.roomid,
                userId:this.userinfo.userId,
                wrongQuestion:this.wrongid
            }
            var res=await api.addScore(data)
            this.submitFlag=1
            if(res.resultCode==1){
                this.getRankList()
            }
            else{
                this.$LayerTips({
					content: res.resultMessage,
					time: 1500
                });
            }
        },
        onemore(){
            this.$router.push({path:'/pkawait',query:{roomid:this.roomid}})
        },
        back(){
            this.$router.push({path:'/pkgame'})
        }
    },
    destroyed(){
        clearInterval(this.setLeftTime)
        clearInterval(this.setInitTime)
        clearInterval(this.randomInitTime)
    }
}
</script>

<style lang="scss" scoped>
.answer{
    width: 100%;
    height: 100%;
    background: url(~@/assets/img/pk/answerbg.png) no-repeat;
    background-size: 100% 100%;
    .contentbox{
        width: 100%;
        height: auto;
        .top{
            width: 100%;
            height: 2.21rem;
            background: url(~@/assets/img/pk/answertop.png) no-repeat;
            background-size: 100% 100%;
            margin-bottom: .5rem;
            .left{
                width: 3.7rem;
                height: 100%;
                position: relative;
                color: #ffffff;
                .headpic{
                    position: absolute;
                    top: .2rem;
                    left: .32rem;
                    width: .98rem;
                    height: .98rem;
                    background: #7999ff;
                    border:.08rem solid rgba($color: #305ff5, $alpha: .25);
                    border-radius: 50% 50%;
                    .pic{
                        width: .72rem;
                        height: .72rem;
                        border-radius: 50% 50%;
                        margin: .05rem auto 0;
                        img{
                            border-radius: 50% 50%;
                        }
                    }
                }
                .truename{
                    position: absolute;
                    left: 1.49rem;
                    top: .36rem;
                    font-size: .24rem;
                    max-width: 1.3rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: .24rem;
                }
                .score{
                    position: absolute;
                    left: 1.49rem;
                    top: .67rem;
                    font-size: .48rem;
                    max-width: 1.6rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: .48rem;
                }
                .vs{
                    position: absolute;
                    width: 1.2rem;
                    height: 1.64rem;
                    left: 2.5rem;
                    top: 0;
                    background: url("~@/assets/img/pk/css_sprites.png") no-repeat 0 0;
                    background-size: auto 300%;
                    animation: sunrise steps(1,end) 2s infinite forwards;
                    overflow: hidden;
                }
                @keyframes sunrise {
                    0% {
                        background-position: 0 0;
                    }
                    10%{
                        background-position: 25% 0;
                    }
                    20% {
                        background-position: 50% 0;
                    }
                    30% {
                        background-position: 75% 0;
                    }
                    40% {
                        background-position: 100% 0;
                    }
                    50% {
                        background-position: 0 50%;
                    }
                    60% {
                        background-position: 25% 50%;
                    }
                    70% {
                        background-position: 50% 50%;
                    }
                    80% {
                        background-position: 75% 50%;
                    }
                    90% {
                        background-position: 100% 50%;
                    }
                    100% {
                        background-position: 100% 100%;
                    }
                    
                }
                .timer{
                    position: absolute;
                    left: .36rem;
                    top:1.32rem;
                    background: url(~@/assets/img/pk/timer.png) no-repeat;
                    background-size: 100% 100%;
                    width: 2.72rem;
                    height: .6rem;
                    padding: .16rem 0 0 .6rem;
                    .process{
                        width: 2rem;
                        height: .3rem;
                        .pic{
                            background: #ffd300;
                            height: 100%;
                            border-radius: .3rem;
                            position: relative;
                            &::after{
                                content: '';
                                position: absolute; left: .1rem; top: .04rem; right: .1rem;
                                height: .1rem;
                                background: rgba($color: #fff, $alpha: .5);
                                border-radius: .1rem;
                            }
                        }
                    }
                }
            }
            .right{
                width: 3.8rem;
                height: 100%;
                position: relative;
                color: #ffffff;
                .item{
                    width: .98rem;
                    height: 100%;
                    margin-left: .2rem;
                    padding-top: .2rem;
                    text-align: center;
                    float: left;
                    .headpic{
                        width: .98rem;
                        height: .98rem;
                        background: #7999ff;
                        border:.08rem solid rgba($color: #305ff5, $alpha: .25);
                        border-radius: 50% 50%;
                        .pic{
                            width: .72rem;
                            height: .72rem;
                            border-radius: 50% 50%;
                            margin: .05rem auto 0;
                            img{
                                border-radius: 50% 50%;
                            }
                        }
                    }
                    .truename{
                        font-size: .24rem;
                        max-width: 1.3rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: .24rem;
                        padding-top: .05rem;
                    }
                    .score{
                        font-size: .4rem;
                        line-height: .4rem;
                    }
                }
            }
        }
        .content{
            width: 100%;
            padding-bottom: .1rem;
            position: relative;
            .answerbox{
                width: 6.62rem;
                height: auto;
                min-height: 9rem;
                border-radius: .4rem;
                background: #ffffff;
                margin: 0 auto .5rem;
                box-shadow: 0 .08rem .04rem 0 rgba($color: #0b3ff3, $alpha: .8);
                position: relative;
                .topbar{
                    position: absolute;
                    left: -.44rem;
                    top: -.4rem;
                    width: 7.15rem;
                    height: 1.86rem;
                    background: url(~@/assets/img/pk/topbar.png) no-repeat;
                    background-size: 100% 100%;
                }
                .question{
                    font-size: .36rem;
                    color: #333333;
                    width: 5.05rem;
                    margin: 0 auto .4rem;
                    padding-top: .9rem;
                    position: relative;
                    .qtext{
                        width: .9rem;
                        height: .36rem;
                        display: inline-block;
                        &::before{
                            content: '';
                            display: inline-block;
                            width: .9rem;
                            height: .48rem;
                            background: url(~@/assets/img/pk/duoxuan.png) no-repeat;
                            background-size: 100% 100%;
                            position: absolute;
                            left: 0;
                            top: .9rem;
                        }
                    }
                    .picborder{
                        width: 4.3rem;
                        height: 2.42rem;
                        margin: .2rem auto 0;
                        position: relative;
                        img{
                            position: absolute;
                        }
                        &.picborder2{
                            width: 5.3rem;
                            height: 2.98rem;
                            margin-top: 0;
                        }
                    }
                    .audio{
                        width: 3.5rem;
                        height: 1.1rem;
                        margin: .2rem auto 0;
                        padding-bottom: .1rem;
                        .audioplay{
                            background: url(~@/assets/img/pk/audio.png) no-repeat;
                            background-size: 100% 100%;
                            width: 100%;
                            height: 100%;
                            border-radius: .5rem .5rem;
                            &.shadow{
                                box-shadow: 0 0.08rem rgba($color: #e0e8ef, $alpha: 1.0);
                            }
                        }
                    }
                    .bot1{
                        width: 100%;
                        height: .2rem;
                    }
                    .bot2{
                        width: 100%;
                        height: .3rem;
                    }
                }
                .optionbox{
                    padding: 0 .56rem;
                    &.botmargin::after{
                        content: "";
                        display: block;
                        width: 100%;
                        height: .2rem;
                    }
                    .option{
                        width: 100%;
                        min-height: .88rem;
                        border-radius: .44rem .44rem;
                        padding: .24rem .7rem;
                        font-size: .36rem;
                        color: #333333;
                        background: #f3f5f7;
                        margin-bottom: .2rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        &.on{
                            background: #e5f7ff;
                            color: #02affe;
                        }
                        &.wrong{
                            background: #ff7100;
                            color: #ffffff;
                            &::before{
                                content: '';
                                position: absolute;
                                left: .35rem;
                                top: .32rem;
                                width: .25rem;
                                height: .25rem;
                                background: url(~@/assets/img/pk/wrong.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        &.isright{
                            background: #00cd86;
                            color: #ffffff;
                            &::before{
                                content: '';
                                position: absolute;
                                left: .35rem;
                                top: .32rem;
                                width: .25rem;
                                height: .25rem;
                                background: url(~@/assets/img/pk/right.png) no-repeat;
                                background-size: 100% 100%;
                            }
                        }
                        .txt{
                            line-height: .36rem;
                        }
                    }
                    .option:last-child{
                        margin-bottom: .4rem;
                    }
                    .ans-input{
                        border: .04rem solid #eeeeee;
                        width: 100%;
                        min-height: .88rem;
                        border-radius: .44rem .44rem;
                        padding: .1rem .2rem;
                        font-size: .36rem;
                        color: #333333;
                        background: rgba($color: #ffffff, $alpha: 0);
                        margin-bottom: .2rem;
                        position: relative;
                        caret-color:#02affe;
                        text-align: center;
                    }
                }
                .submit{
                    width: 100%;
                    height: 1.38rem;
                    .subbtn{
                        position: absolute;
                        left: .56rem;
                        bottom: .5rem;
                        width: 5.5rem;
                        height:.88rem;
                        border-radius: .44rem;
                        background: url(~@/assets/img/pk/submit1.png) no-repeat;
                        background-size: 100% 100%;
                        &.subbtn2{
                            background: url(~@/assets/img/pk/submit2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        &.subbtn3{
                            background: url(~@/assets/img/pk/submit3.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }
    }
    .mask{
        canvas{
            position: absolute;
            display: block;
            z-index: 3002;
            left: 50%;
            transform: translateX(-50%);
        }
        &.resultCanvas{
            canvas{
                margin-top: -1.28rem;
                width: 7.5rem;
                height: 13.34rem;
            }
        }
        &.failCanvas{
            canvas{
                margin-top:2.92rem;
                width:4rem;
                height: 5.26rem;
            }
        }
        .answerList{
            width: 100%;
            height: 100%;
            position: absolute;
            margin-top: -1.28rem;
            left: 0;
            z-index: 3003;
            
            &.success{
                background: url(../../../static/img/pkEnd/success/1.png) no-repeat;
                background-size: 100% auto;
            }
            &.zjzl{
                background: url(../../../static/img/pkEnd/zjzl/1.png) no-repeat;
                background-size: 100% auto;
            }
            &.fail{
                background: url(../../../static/img/pkEnd/fail/1.png) no-repeat;
                background-size: 100% auto;
            }
            .rank{
                position: absolute;
                width: 4.9rem;
                height: 4.4rem;
                left: 1.3rem;
                top: 5.77rem;
                .item{
                    width: 100%;
                    height: 1.1rem;
                    position: relative;
                    .icon{
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: .58rem;
                        height: .7rem;
                        &.icon1{
                            background: url(~@/assets/img/pk/first.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        &.icon2{
                            background: url(~@/assets/img/pk/second.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        &.icon3{
                            background: url(~@/assets/img/pk/third.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        &.icon4{
                            background: url(~@/assets/img/pk/fourth.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                    .avatar{
                        width: .72rem;
                        height: .72rem;
                        border-radius: 50%;
                        border: .06rem solid rgba($color: #0d267a, $alpha: .2);
                        background: #7898fe;
                        position: absolute;
                        left: .67rem;
                        top:50%;
                        transform: translateY(-50%);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .pic{
                            width: .6rem;
                            height: .6rem;
                            border-radius: 50%;
                            img{
                                border-radius: 50% 50%;
                            }
                        }
                    }
                    .truename{
                        font-size: .36rem;
                        color:#ffffff;
                        position: absolute;
                        left: 1.52rem;
                        top: 50%;
                        transform: translateY(-50%);
                        max-width: 1.8rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        &.noname{
                            color:#7898fe;
                        }
                    }
                    .shadowcoin{
                        position: absolute;
                        left: 3.3rem;
                        top: .33rem;
                        width: .48rem;
                        height: .49rem;
                        background: url(~@/assets/img/pk/shadowcoin.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .score{
                        position: absolute;
                        left: 3.82rem;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #ffd300;
                        font-size: .4rem;
                    }
                }
            }
            .onemore{
                position: absolute;
                left: .72rem;
                top: 11.19rem;
                width: 2.6rem;
                height: 1rem;
                background: url(~@/assets/img/pk/onemore.png) no-repeat;
                background-size: 100% 100%;
            }
            .back{
                position: absolute;
                left: 3.65rem;
                top: 11.19rem;
                width: 3.1rem;
                height: 1rem;
                background: url(~@/assets/img/pk/back.png) no-repeat;
                background-size: 100% 100%;
            }
        }
        .fenyin{
            position: absolute;
            top: 2.92rem;
            left: 50%;
            transform: translateX(-50%);
            width: 4rem;
            height: 5.26rem;
            
            background: url(../../../static/img/pkEnd/fenyin/1.png) no-repeat;
            background-size: 100% auto;
            .word{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 6rem;
                font-size: .48rem;
                color: #ffffff;
                white-space: nowrap;
            }
        }
        .loading-word{
            font-size: .5rem;
            width: 100%;
            height: 100%;
            display: flex;
            color: #ffffff;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
